<template>
  <div class="winfo">
    <div class="box-winfo">
      <!-- 视频播放区域 -->
      <van-icon name="arrow-left" class="left-arrow" size="30px" @click="clickleft" />
      <van-sticky :offset-top="0">
        <div class="winfo-top">
          <video class="wm-img" controls="controls" :src="video.video_url"></video>
        </div>
      </van-sticky>
      <div class="winfo-bottom">
        <van-sticky :offset-top="210">
          <van-card :title="video.media_name" desc="86万粉丝" :thumb="video.img_url">
            <van-button slot="num" type="danger" size="mini" @click="guanzhu">{{isFlag?"已关注":'关注'}}</van-button>
          </van-card>
        </van-sticky>
        <div class="h-txt">{{video.title}}</div>
        <!-- 点赞区域 -->
        <div class="click">
          <span class="zan" id="zan" @click="getClick">
            <van-icon name="good-job" color="red" v-if="isLike" />
            <van-icon name="good-job-o" v-else />
            <span>{{video.likes}}</span>
          </span>
          <span class="zan">
            <van-icon name="share" />
            <span>分享</span>
          </span>
          <span class="zan">
            <van-icon name="after-sale" />
            <span>赞赏</span>
          </span>
        </div>
        <!-- 更多视频区域 -->
        <div class="banner" v-for="el in list" :key="el.id">
          <div class="txt">
            <div>{{el.title}}</div>
            <span>{{el.media_name}}</span>
            <span>{{el.datetime}}</span>
          </div>
          <div class="img">
            <img :src="el.img_url" />
          </div>
        </div>
      </div>
    </div>
    <comment :id="id" :refreshcom="refreshcom" ref="recom"></comment>
    <operation :id="id" @refreshCom="refreshCom"></operation>
    <div class="null"></div>
  </div>
</template>
<script>
import Comment from '@/components/Comment'
import Operation from '@/components/Operation'
export default {
  data: () => ({
    id: '',
    video: {},
    list: [],
    isFlag: false,
    isLike: false,
    refreshcom: false
  }),
  created() {
    this.id = this.$route.params.id
    this.getVideo()
    this.getList()
    // console.log(this.id)
  },
  methods: {
    // 获取视频
    async getVideo() {
      const {
        data: { data, status }
      } = await this.$http.get('/api/getnews/' + this.id)
      if (status !== 0) return console.log('获取失败')
      this.video = data[0]
      // console.log(data[0])
    },
    // 获取新闻列表
    async getList() {
      const {
        data: { data, status }
      } = await this.$http.get('/api/getnewslist/' + 1)
      if (status !== 0) return console.log('获取失败')
      this.list = data.filter(el => {
        if (el.img_url !== null) {
          return true
        }
      })
      // console.log(this.list)
    },
    // 点赞或取消
    async getClick() {
      if (this.isLike) {
        this.isLike = false
        const {
          data: { status }
        } = await this.$http.get('/api/addnewslike/' + this.id + '/-1')
        if (status !== 0) return console.log('获取失败')
        this.video.likes--
        document.getElementById('zan').style.borderColor = ''
        return
      }
      this.isLike = true
      const {
        data: { status }
      } = await this.$http.get('/api/addnewslike/' + this.id + '/1')
      if (status !== 0) return console.log('获取失败')
      this.video.likes++
      document.getElementById('zan').style.borderColor = 'red'
    },
    guanzhu() {
      this.isFlag = !this.isFlag
    },
    clickleft() {
      this.$router.go(-1)
    },
    refreshCom (refresh) {
      // 发表评论后更新评论
      this.refreshcom = refresh
      this.$refs.recom.reComment(refresh)
    }
  },
  components: { Comment, Operation }
}
</script>
<style lang="less" scoped>
.winfo {
  .null{
    height:40px;
  }
  .left-arrow {
    position: fixed;
    top: 10px;
    left: 10px;
    color: #fff;
    z-index: 111;
  }
  .winfo-top {
    background: #000;
    width: 100%;
    height: 200px;
    .wm-img {
      width: 100%;
      height: 210px;
    }
  }
  .winfo-bottom {
    margin-top: 6px;
    .van-card {
      height: 70px;
      background: #fff;
      .van-card__thumb {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
      }
      .van-button {
        position: absolute;
        right: 10px;
        top: 10px;
      }
      .van-card__content {
        display: flex;
        .van-card__title {
          display: inline-block;
        }
      }
    }
    .h-txt {
      margin-bottom: 10px;
      margin-left: 10px;
      font-weight: 600;
    }
    .click {
      display: flex;
      justify-content: space-evenly;
      .zan {
        display: inline-block;
        width: 25%;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 12px;
        }
      }
    }
    .banner {
      margin-top: 10px;
      height: 75px;
      display: flex;
      .txt {
        flex: 3;
        margin-left: 12px;
        span {
          display: inline-block;
          margin-right: 10px;
          font-size: 12px;
          color: #ccc;
        }
      }
      .img {
        img {
          margin-right: 14px;
          width: 110px;
          height: 70px;
          flex: 1;
        }
      }
    }
  }
}
</style>
